<template>
  <div class="index-border">
    <img
      :class="['b', index === 3 ? 'f3' : '', index === 1 ? 'f1' : '']"
      :src="topRankMap[index]"
      alt=""
    />
    <span :class="['title', index <= 3 ? 'bold-color' : '']">
      {{ index }}
    </span>
  </div>
</template>
<script>
export default {
  props: {
    index: {
      type: Number,
      default: 1,
    },
  },
  data() {
    return {
      topRankMap: {
        1: require("@/assets/screen/ran1.png"),
        2: require("@/assets/screen/ran2.png"),
        3: require("@/assets/screen/ran3.png"),
      },
    };
  },
  methods: {},
};
</script>
<style lang="scss" scoped>
.index-border {
  position: relative;
  text-align: center;
}
.b {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.title {
  position: relative;
  font-size: 0.2rem;
  z-index: 5;
}

.bold-color {
  color: #afbed8;
}

.f1 {
  top: 60%;
}

.f3 {
  top: 71%;
}
</style>
